<template>
    <view class="overall">
        <wd-status-tip v-if="dataInfo==null?true:false" image="content" tip="暂无内容" />
        <view class="content" v-if="dataInfo==null?false:true">
            <view class="one">
                <image :src="BASE_API_URL + '/' + dataInfo[0].avatar" mode=""></image>
                <view>
                    <view>{{doctor.name}}</view>
                    <view>{{dataInfo[0].duties}}{{dataInfo.length}}人</view>
                </view>
            </view>
            <view class="tow">
                <view>{{dataInfo[0].duties}}{{dataInfo.length}}人</view>
                <view>
                    <view v-for="(item,index) in dataInfo" :key="index" @click="page(item)">
                        <view>{{item.name}}医生</view>
                    </view>
                </view>
            </view>
            <view class="dorText">
                <view>科室基本情况</view>
                <view>{{doctor.details}}</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { BASE_API_URL } from '@/utils/config'; // 导入配置
import {
    ref
} from 'vue';
import {
    work,
    details
} from '@/api/index.js';

function handleClickLeft() {
    uni.navigateBack();
}

const dataInfo = ref([]);
const doctor = ref([]);
uni.getStorage({
    key: 'doctor',
    success: function(res) {
        console.log(res.data);
        doctor.value = res.data;
        details({
            depart_id: res.data.id,
        }).then(res => {
            console.log(res.data);
            dataInfo.value = res.data;
        });
    }
});

function page(item) {
    console.log(item);
    // 医生信息
    uni.setStorage({
        key: 'details',
        data: item,
        success: function() {
            console.log('数据存储成功');
        }
    });
    uni.navigateTo({
        url: '/pages/homepage/homepage'
    })
}
</script>

<style scoped>
.overall {
    width: 100%;
    background-color: #FFFFFF;
    min-height: 100vh;
}

.title {
    width: 100%;
    height: 180rpx;
    background-color: #00DACA;
    color: white;
    display: flex;
    align-items: center;
}

.name {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 42rpx;
    margin-top: 50rpx;
    margin-left: 3%;
}

.name>view {
    margin-left: 20rpx;
}

.content {
    width: 90%;
    padding: 30rpx 5%;
}

image {
    width: 120rpx;
    height: 120rpx;
    margin-right: 20rpx;
    border-radius: 10rpx;
    border: 5rpx #EEEEEE solid;
}

.one {
    display: flex;
}

.one>view {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.one>view>view:first-child {
    font-weight: bold;
    font-size: 30rpx;
}

.tow {
    width: 100%;
    margin-top: 40rpx;
    border-bottom: 5rpx #EEEEEE solid;
    padding-bottom: 30rpx;
}

.tow>view:first-child {
    font-weight: bold;
    font-size: 32rpx;
}

.tow>view:last-child {
    width: 100%;
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tow>view:last-child>view {
    border: 5rpx #ECECEC solid;
    padding: 10rpx 30rpx;
    border-radius: 8rpx;
}

.dorText {
    width: 100%;
    margin-top: 40rpx;
}

.dorText>view:first-child {
    font-weight: bold;
    font-size: 32rpx;
}

.dorText>view:last-child {
    width: 100%;
    margin-top: 30rpx;
    font-size: 30rpx;
}
</style>    